<template>
  <i class="easy-icon" :class="iClass" :style="[style, iconSizeStyles]">
    <svg class="icon" aria-hidden="true" viewBox="0 0 1024 1024">
      <slot>
        <use :xlink:href="`#icon-${name}`"></use>
      </slot>
    </svg>
  </i>
</template>

<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent, computed } from 'vue'
export default defineComponent({
  name: 'Icon',
  props: {
    name: {
      type: String as PropType<string>,
      default: '',
    },
    size: {
      type: [Number, String] as PropType<string | number>,
      default: '1em',
    },
    style: {
      type: Object,
      default: null,
    },
    iClass: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const iconSizeStyles = computed(() => {
      const { size } = props
      if (size === 'small') {
        return {
          fontSize: '12px',
        }
      }
      if (size === 'medium') {
        return {
          fontSize: '16px',
        }
      }
      if (size === 'large') {
        return {
          fontSize: '36px',
        }
      }
      if (typeof size === 'number') {
        return {
          fontSize: size + 'px',
        }
      } else {
        if (size === '1em') {
          return {
            fontSize: '1em',
          }
        }
        let reg = /^[1-9][0-9]*/
        let matchNum = size.match(reg)
        if (matchNum) {
          return {
            fontSize: matchNum[0] + 'px',
          }
        } else {
          return {
            fontSize: '1em',
          }
        }
      }
    })
    return {
      iconSizeStyles,
    }
  },
})
</script>
<style lang="scss">
/* @import "//at.alicdn.com/t/font_2165670_pdk5zbimcx.css"; */
.easy-icon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.15em;
  cursor: pointer;
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor; /*使用该关键字的元素的（或其最近父元素）color属性的颜色值*/
    overflow: hidden;
  }
  svg {
    display: inline-block;
    &:not(:root) {
      overflow: hidden;
    }
  }
  & > * {
    line-height: 1;
  }
  *,
  :after,
  :before {
    box-sizing: border-box;
  }
}
</style>
